Randomize JSON Array in jQuery

In this tutorial, I will explain how to randomise a JSON Array by using jQuery to get some random character set from JSON Object Array. As usual, I will explain the function with a real life example. Our aim is to accept 3 numbers from the user between 1 to 9 and then output 3 random characters correspond to the individual number. Each number store 3 alphabets eg 1 store A, B, C similarly 2 store D, E, F and 3 store G, H, I etc. If user input is 132 then our required output is any single random letter from ABC and GHI and DEF (For example BID). A tricky problem right? but actually, you can easily solve a tricky problem like this in javascript by storing data in JSON format and by using jQuery a fast, small, and feature-rich JavaScript library.

SO LET'S START CODING

The complete javascript code for achieving above task is given below.

<script>
	 $(function(){ // Shortform for $(document).ready(function(){});
		var data = {
			"1": ["A", "B", "C"],
			"2": ["D", "E", "F"],
			"3": ["G", "H", "I"],
			"4": ["J", "K", "L"],
			"5": ["M", "N", "O"],
			"6": ["P", "Q", "R"],
			"7": ["S", "T", "U"],
			"8": ["V", "W", "X"],
			"9": ["Y", "Z"]
		};
				
        $('#form').on('submit', function (e) {
            e.preventDefault();         
			var input = $("#numbers").val();
            var input_array = input.split('');
			var alphabet_array = [];
			var output_array = [];

			$.each(input_array, function( index, number ) {				

				$.each(data[number], function( index, alphabet ) {
					alphabet_array.push(alphabet);
				});
				
				output_array.push(alphabet_array[Math.floor(Math.random()*alphabet_array.length)]);
				
				alphabet_array =  [];
			});
			$("#output").html(output_array);
        });
    });	
	</script>

Now let me explain the program one by one.

First, we need to store the data as a JSON array. JSON (JavaScript Object Notation) is a lightweight data-interchange format. Arrays in JSON are almost the same as arrays in JavaScript.In JSON, array values must be of type string, number, object, array, boolean or null.

Second, we need to store submit the value of input numbers into individual array elements. In Javascript, the split() method is used to split a string into an array of substrings and returns the new array.If an empty string ("") is used as the separator, the string is split between each character.

Syntax

string.split(separator, limit)

Now we use a foreach loop to iterate over our numbers and we use another foreach loop to iterate over individual alphabets corresponds to that numbers. We store alphabets of the individual number in an alphabet_array. In jQuery, .each() method is an alternative to javascript forEach() method. I used it more often in my programming than forEach() method but it is definitely up to your choice.

Now we need to pick a random alphabet from this alphabet array. We use Math.random() method of javascript for this. The Math.random() returns a random number between 0 (inclusive), and 1 (exclusive). Math.random() used with Math.floor() can be used to return random integers.

Math.floor(Math.random() * 10);     // returns a number between 0 and 9

Now using the random key value we will extract the alphabet corresponds to alphabet_array and store it on an output_array. The alphabet_array is unset at end of each foreach loop to avoid duplication.

Now let's make our program a little colourful by giving some HTML and CSS to it. I used Bootstrap for achieving it. So the complete code for the index.html page is given below.

<html>
  <head>
    <title>Randomize JSON Array Demo</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
  </head>
  <body>
    <div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<h2 class="text-center" style="color:#337ab7;"><u>Randomize JSON Array Demo</u></h2>
				<form  id="form" method="POST" >
					<div class="form-group">
						<label for="inputName" class="control-label">Numbers</label>
						<input type="text" id="numbers" pattern="[1-9]{1,3}"  class="form-control"  placeholder="Enter Any 3 Numbers From 1 to 9" required/>
					</div>
					<button class="btn btn-block btn-primary"  type="submit" name="submit">Submit</button>
				</form>
				<h2 class="text-center" style="color:#337ab7;" id="output">
				</h2>
				<table class="table table-bordered table-striped text-center">
					<thead>
						<tr>
							<th  class="text-center">Number</th>
							<th  class="text-center">Values</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>A B C</td>
						</tr>
						<tr>
							<td>2</td>
							<td>D E F</td>
						</tr>
						<tr>
							<td>3</td>
							<td>G H I</td>
						</tr>
						<tr>
							<td>4</td>
							<td>J K L</td>
						</tr>
						<tr>
							<td>5</td>
							<td>M N O</td>
						</tr>
						<tr>
							<td>6</td>
							<td>P Q R</td>
						</tr>
						<tr>
							<td>7</td>
							<td>S T Q</td>
						</tr>
						<tr>
							<td>8</td>
							<td>V W X</td>
						</tr>
						<tr>
							<td>9</td>
							<td>Y Z</td>
						</tr>
					</tbody>
				  </table>
				
			</div>
		</div>
		
	<br>
	</div>
	<script>
	 $(function(){ // Shortform for $(document).ready(function(){});
		var data = {
			"1": ["A", "B", "C"],
			"2": ["D", "E", "F"],
			"3": ["G", "H", "I"],
			"4": ["J", "K", "L"],
			"5": ["M", "N", "O"],
			"6": ["P", "Q", "R"],
			"7": ["S", "T", "U"],
			"8": ["V", "W", "X"],
			"9": ["Y", "Z"]
		};
				
        $('#form').on('submit', function (e) {
            e.preventDefault();         
			var input = $("#numbers").val();
            var input_array = input.split('');
			var alphabet_array = [];
			var output_array = [];

			$.each(input_array, function( index, number ) {				
				
				$.each(data[number], function( index, alphabet ) {
					alphabet_array.push(alphabet);
				});
				
				output_array.push(alphabet_array[Math.floor(Math.random()*alphabet_array.length)]);
				
				alphabet_array =  [];
			});
			$("#output").html(output_array);
        });
    });	
	</script>
	
  </body>
</html>

Note I used HTML validation only in this case which is only necessary in the case of demo programs like this. The HTML input validation offers regular expression checking for advanced pattern matching. The pattern attribute is used for achieving it but remember that it will work only in text inputs.

The output image of above program is given below.

Randomize JSON Array Demo - shareurcodes.com